<template>
  <template v-for="item in (menuList as any)" :key="item.id">
    <templatem v-if="!item.children || !item.children.length">
      <el-menu-item
        :index="item.id"
        style="width: 300px; display: inline-block; box-sizing: border-box"
        class="text_over"
        >{{ item.name }}</el-menu-item
      >
    </templatem>
    <el-sub-menu :index="item.id" v-if="item.children">
      <template #title>
        <span
          :style="{
            color: default_menu_id == item.id ? '#3580EB' : '',
          }"
          >{{ item.name }}</span
        >
      </template>
      <Menu :menuList="item.children"></Menu>
    </el-sub-menu>
  </template>
</template>

<script lang="ts" setup>
import { toRefs } from "vue";
const props = defineProps({
  menuList: Array,
  default_menu_id: String,
});
const { default_menu_id, menuList } = toRefs(props);
console.log(props);
</script>
<script lang="ts">
export default {
  name: "Menu",
};
</script>

<style scoped></style>
